<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>重叠聚类可视分析</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css?adv=1.2">
    <script src="/static/js/jquery-3.5.0.min.js"></script>
    <script src="/static/layui/layui.js"></script>
    <script src="/static/js/d3.v5.js"></script>
     <script>
        document.write('<script src="./static/js/basicOP.js?adv='+Math.random()+'"><\/script>');
        document.write('<script src="/static/js/chart.js?adv='+Math.random()+'"><\/script>');
        document.write('<script src="/static/js/dataTable.js?adv='+Math.random()+'"><\/script>');
        document.write('<script src="/static/js/basicScatter.js?adv='+Math.random()+'"><\/script>');
        document.write('<script src="/static/js/basicTreeChart.js?adv='+Math.random()+'"><\/script>');
        document.write('<script src="/static/js/basicRiver.js?adv='+Math.random()+'"><\/script>');
        document.write('<script src="/static/js/AttributeDivision.js?adv='+Math.random()+'"><\/script>');
        document.write('<script src="/static/js/ConfusionMatrix.js?adv='+Math.random()+'"><\/script>');
         document.write('<script src="/static/js/ClusterSplit.js?adv='+Math.random()+'"><\/script>');
     </script>
       <style>
        /*关键设置 tbody出现滚动条*/
        table tbody {
            display: block;
            height: 250px;
            overflow-y: scroll;
        }
        table thead,
        tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }
        /*关键设置：滚动条默认宽度是16px 将thead的宽度减16px*/
        table thead {
            width: calc( 100% - 1em)
        }
        ::-webkit-scrollbar{
            width: 10px;
         }
        /*::-webkit-scrollbar-track{*/
        /*    background-color: #f5f5f5;*/
        /*    -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.1);*/
        /*    border-radius:5px;*/
        /*}*/
        /* ::-webkit-scrollbar-thumb{*/
        /*     background-color: rgba(0, 0, 0, 0.2);*/
        /*     border-radius: 5px;*/
        /* }*/
        /* ::-webkit-scrollbar-button{*/
        /*     background-color: #eee;*/
        /*     display: none;*/
        /* }*/
        /* ::-webkit-scrollbar-corner{*/
        /*     background-color: black;*/
        /* }*/
    </style>
</head>
<body >
<div class="layui-container layui-bg-gray" >
    <div class="layui-row">
        <div class="layui-col-lg3">

            <div class="layui-row" style="margin: 3px;overflow:auto;margin-bottom: 5px">
                <form class="layui-form layui-form-pane" action="">

                                <div class="layui-row" style="margin-l: 1px;margin-top: 10px">
                                    <div class="layui-col-lg6" id="uploadDiv" style="text-align: center">
                                        <button type="button" class="layui-btn" id="uploadFile" onclick="showClusterResult()"><i class="layui-icon"></i>load data</button>
                                    </div>
                                    <div class="layui-col-lg6" id="dataInfoDiv">

                                    </div>
                                </div>
<!--                                <div class="layui-form-item " style="margin-left: 10px;margin-top: 10px">-->
<!--                                        <label class="layui-form-label">User Type</label>-->
<!--                                         <div class="layui-input-block">-->
<!--                                             <select name="city" lay-verify="required">-->
<!--                                                <option value="0">Technical Experts</option>-->
<!--                                                <option value="1">Domain Experts</option>-->
<!--                                                <option value="2">Lay Users</option>-->
<!--                                              </select>-->
<!--                                        </div>-->
<!--                                </div>-->
<!--                                <div class="layui-form-item" style="margin-left: 10px;margin-top: 10px">-->
<!--                                        <label class="layui-form-label">User Tasks</label>-->
<!--                                        <div class="layui-input-block">-->
<!--                                             <select name="city" lay-verify="required">-->
<!--                                                <option value="0">Model Improvement</option>-->
<!--                                                <option value="1">Trust Enhancement</option>-->
<!--                                                <option value="2">Decision Making</option>-->
<!--                                              </select>-->
<!--                                        </div>-->
<!--                                </div>-->

                                 </form>
            </div>
             <div cass="layui-row" style="margin: 3px">
                <div class="layui-card">
                    <div class="layui-card-header  "style="font-weight:bold"> Projection
                         <div style="float: right">
                                 <select id="select_Projection" onchange="drawBasicScatter()">
                                    <option value="0" selected="">TSNE</option>
                                    <option value="2">PCA</option>
                                 </select>
                            </div>

                    </div>
                    <div class="layui-card-body" style="height: 200px;overflow: auto">
                        <div id="scatterView" style="height: 183px;stroke: #0C0C0C;stroke-width: 1px"></div>
                    </div>
                </div>
            </div>
            <div cass="layui-row" style="margin: 3px">
                <div class="layui-card">
                    <div class="layui-card-header  "style="font-weight:bold"> Explanation Objects
                    </div>
                    <div class="layui-card-body" style="height: 150px;overflow: auto">
                          <form class="layui-form layui-form-pane" action="" id="typeView">

                          </form>
                    </div>
                </div>
            </div>
            <div class="layui-row" style="margin: 3px">
                <div class="layui-card">
                    <div class="layui-card-header " style="font-weight:bold"> Preferred Features
                    </div>
                    <div class="layui-card-body">

                      <div  style="width: 250px;height: 200px; overflow: auto">
                            <form class="layui-form layui-form-pane" action="" id="AttributeImportanceView">

                          </form>
                      </div>
                    </div>
                </div>
            </div>
             <div style="text-align: center;margin-top: 15px" >
                <button type="button" class="layui-btn" onclick="makeExplanation();" >Explanation Generate</button>
            </div>
            <div class="layui-row" style="margin: 3px;display:none">
                <div class="layui-card">
                    <div class="layui-card-header "> 混淆矩阵
                    </div>
                    <div class="layui-card-body">

                      <div id="MatrixView" style="width: 250px;height: 250px;text-align: center">

                      </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-lg6">
            <div class="layui-row" style="margin: 3px;overflow:auto">
                <div class="layui-card">
                    <div class="layui-card-header" style="font-weight:bold"> Explanation Tree

                    </div>
                    <div class="layui-card-body">

                        <div id="ruleTreeView" style="position:relative;width: 660px;height: 800px;">

                         </div>
                        <div id="divisionView" style="position:absolute; right:10px; top:10px;width: 200px;border:1px solid #2b8f2b">

                        </div>
                        <div style="position:absolute; right:20px; top:15px;width: 30px;">
<!--                            <button onclick="splitTheNode();">Split</button>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-lg3">
            <div class="layui-row" style="margin: 3px">
                <div class="layui-card">
                    <div class="layui-card-header" style="font-weight:bold">Cluster Split Info

                    </div>
                    <div class="layui-card-body">
                        <div id="ClusterSplitView" style="width: 330px;height: 250px;overflow: auto">

                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row" style="margin: 3px">
                <div class="layui-card">
                    <div class="layui-card-header" style="font-weight:bold">Feature Split Info

                    </div>
                    <div class="layui-card-body">
                        <div id="streamView" style="width: 330px;height: 485px;overflow:auto">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row" >
                 <div class="layui-card">
                    <div class="layui-card-header"> 数据表格
                        <div style="float:right;">
                            <select id="select_Tree" onchange="">
                                <option value="0" >支持度</option>
                                <option value="1" selected="">置信度</option>
                                <option value="0" selected="">紧凑度</option>
                            </select>

                        </div>
                    </div>
                    <div class="layui-card-body">
                       <table class="layui-table" lay-skin="line">
                           <thead>

                           </thead>
                           <tbody style="height: 144px" >

                           </tbody>
                        </table>
                    </div>
                </div>
            </div>

</div>
</body>
<script>
    var num = 0;
    var featureNames=[];
    var featureNameImportance = [];
    var n_feature;
    var typelist;
    var typeInfo=[];
    var useType= [];
    var scatterUseType= [];
    var dataSet;
    var n_cluster;
    var analy_cluster;
    var analyDataSet=[];
    var analyTypelist=[];
    var splitNode;
    var selectsplitFeature;
    var selectsplitValue;
    var selectsplitmistake;
    var anyfeature;
    var dTable = new dataTable();
    var typeColor = [];
    var splitTree={};
    var preTypelist=[];
    var preTypeIndex=[];
    var labels;
    var bestsplitValue={};
    var splitData= [];
    var scatterData = [];
    var splitSet=[];
    // layui.use('upload', function() {
    //     var  upload = layui.upload;
    //     upload.render({
    //         elem: '#uploadFile'
    //         ,url: 'http://127.0.0.1:8000/upload_file/' //改成您自己的上传接口
    //       ,accept:"file"
    //         ,done: function(res){
    //               doUPLoadFile(res);
    //         }
    //     });
    // });
    layui.use('form', function() {
        var form = layui.form;


    });
    layui.use('layer', function(){
        var layer = layui.layer;
    });
    layui.use('element', function(){
        var element = layui.element;
    });
    layui.use('rate', function(){

    });
</script>
</html>
